<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令系统</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .active{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="app">

</div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
  //创建实例化对象
  //v-if 数据属性对呀的值 如果为假 则不在页面中渲染 反之亦然  更高的切换开销
  //v-show 控制dom元素的显示隐藏display:none | block;控制的  更高的初始化开销
    new Vue(
        {
            el: "#app",
            data:function () {
                return{
                    msg:'指令系统',
                    msg2:'<h2> 指令系统</h2>',
                    isShow:true
                }
            },template: ' <div class="app"> ' +
            '<h2> {{msg}}</h2>' +
            '<p v-text="msg"></p>' +
            '<div v-html="msg2"></div>' +
            '<div v-text="1+1"></div>' +
            '<div v-if="isShow"> 澳门赌场开业了</div>' +
            '<div v-if="!isShow"> 澳门赌场开业了</div>' +
            '<div v-if="Math.random()>0.5">  已显示</div>' +
            '<div v-else>已隐藏</div>' +
            '<div v-show="isShow">显示</div>' +
            '<div v-show="!isShow">隐藏</div> ' +
            '<div class="box" v-bind:class ="{active:false}"></div>' +
            '</div>  '
        }
    )

</script>
</body>
</html>